<template>
    <div>
        <router-link tag="div" :to="{name:'foundList'}" class="found-list">
            <img class="jb fl" src="../../assets/image/index/icon_ranking.png" alt="" srcset="">
            <span class="fl font-3 ph-name">TOP排行榜</span>
            <van-icon class="fr" name="arrow" color="#fff" size=".3rem" />
            <span class="fr list-img">
                <img class="border-radius-50 fl" src="../../assets/image/center/timg.jpg" alt="">
                <img class="border-radius-50 fl" src="../../assets/image/center/timg.jpg" alt="">
                <img class="border-radius-50 fl" src="../../assets/image/center/timg.jpg" alt="">
            </span>
        </router-link>
        <div class="paddingLR clearfix choujiang">
            <div class="cj-bj cj-01 fl position-r">
                <img class="cj-bj-h" src="../../assets/image/index/bg_lottery.png" alt="">
                <div class="wenan">
                    <span class="dispaly-block font-3 span1">幸运抽大奖</span>
                </div>
            </div>
            <div class="cj-bj cj-02 fr position-r">
                <img class="cj-bj-h" src="../../assets/image/index/bg_mall.png" alt="">
                <div class="wenan">
                    <span class="dispaly-block font-3 span1">积分商城</span>
                    <span class="dispaly-block font-2 span1" style="padding-top:0;">暂未开放，敬请期待...</span>
                </div>
            </div>
            <div class="cj-bj cj-01 fl position-r" style="margin-top:2%;">
                <img class="cj-bj-h" src="../../assets/image/index/bg_alliance.png" alt="">
                <div class="wenan">
                    <span class="dispaly-block font-3 span1">部落联盟<em class="font-2">（暂未开放）</em></span>
                    <span class="dispaly-block font-2 span1" style="padding-top:0;">节奏我来带，开黑聊天来这里！</span>
                </div>
            </div>
            <div class="cj-bj cj-02 fr position-r" style="margin-top:2%;">
                <img class="cj-bj-h" src="../../assets/image/index/bg_transactions.png" alt="">
                <div class="wenan">
                    <span class="dispaly-block font-3 span1">二手交易</span>
                    <span class="dispaly-block font-2 span1" style="padding-top:0;">暂未开放，敬请期待...</span>
                </div>
            </div>
        </div>
        <div class="center-tab-box background-fff clearfix">
            <div class="center-tab paddingLR">
                <span class="fl color-6 font-28" :class="[index == active ? 'active' : '']" v-for="(item,index) in tabArr" :key="index"  @click="tabClick(index)">{{item}}</span>
                <router-link tag="div" :to="{name:'release'}">
                    <img class="xiangji fr" src="../../assets/image/index/xiangji.png" alt="">
                </router-link>
            </div>
            <div class="dynamic-box clearfix background-fff paddingLR">
                <div class="dynamic-name clearfix">
                    <img class="fl dynamic-name-tx" src="../../assets/image/center/tx.png" alt="">
                    <div class="name-box fl">
                        <span class="name-box-top">
                            <em class="fl font-28 color-3 font-bold">小花猫的脸</em>
                            <img class="fl name-sex" src="../../assets/image/index/img_female.png" alt="" srcset="">
                            <em class="fl color-6 font-24">22</em>
                            <em class="font-28 fr guanzhu text-align-c" @click="guazhu()">+  关注</em>
                        </span>
                        <span class="name-xia">
                            <img src="../../assets/image/center/icon_wzry2.png" alt="">
                            <img src="../../assets/image/center/icon_mszb1.png" alt="">
                            <img src="../../assets/image/center/icon_dwrg1.png" alt="">
                        </span>
                    </div>
                </div>
                <p class="dynamic-title font-3">你们想不想吃火锅啊，很嗨的火锅？</p>
                <div class="img-box clearfix">
                    <img class="fl" src="../../assets/image/center/timg.jpg" alt="" srcset="">
                    <img class="fl margin-left-2" src="../../assets/image/center/timg.jpg" alt="" srcset="">
                    <img class="fl margin-left-2" src="../../assets/image/center/timg.jpg" alt="" srcset="">
                </div>
                <div class="like-comm clearfix color-9 font-24">
                    <router-link tag="span" :to="{name:'comments',params:{commentsId:'1111'}}" class="fr">
                        <img class="fl" src="../../assets/image/center/icon_comment.png" alt="">
                        30
                    </router-link>
                    <span class="fr">
                        <img class="fl" src="../../assets/image/center/icon_praise_u.png" alt="">
                        60
                    </span>
                    <span class="fr">
                        <img class="fl" src="../../assets/image/index/icon_gift.png" alt="">
                        60
                    </span>
                    <em class="fl color-9 font-22">30分钟前</em>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tabArr:['最新','关注','我的'],
            active:0
        }
    },
    methods:{
        tabClick(index){
            this.active = index
        },
        guazhu(){
            
        }
    }
}
</script>

<style scoped>
.found-list{
    margin: .6rem;
    background-image: url(../../assets/image/index/bg_ranking.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc(100% - 1.2rem);
    height: 2rem;
}
.van-icon-arrow{
    margin-top: .7rem;
    margin-right: .6rem;
}
.jb{
    width: 1.6rem;
    margin-top: .2rem;
    margin-left: 1rem;
}
.ph-name{
    display: inline-block;
    height: 1.6rem;
    line-height: 1.6rem;
    margin-top: .2rem;
    color: #fff;
}
.list-img{
    display: inline-block;
    height: 1.2rem;
    margin-top: .4rem;
    margin-right: .4rem;
}
.list-img img{
    width: 1.2rem;
    margin-left: .2rem;
}
.choujiang{
    width: calc(100% - 1.2rem);
}
.cj-bj{
    display: block;
}
.cj-01{
    width: 55%;
}
.cj-02{
    width: 42%;
}
.wenan{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.wenan .span1{
    color: #fff;
    padding-left: .4rem;
    padding-top: .4rem;
}
.center-tab-box{
    padding: .6rem 0;
}
.guanzhu{
    background-color: #d84e4d;
    color: #fff;
    width: 2rem;
    padding: 0 .2rem;
    border-radius: .6rem;
}
.xiangji{
    width: 1rem;
    margin-top: .2rem;
}
.center-tab{
    height: 1.6rem;
    border-bottom: #eeeeee solid .04rem;
}
.center-tab span{
    height: 1.56rem;
    line-height: 1.56rem;
    margin-right: 1rem;
    border-bottom: #ffffff solid .04rem;
    display: inline-block;
    font-weight: bold;
}
.active{
    color: #d84e4d;
    border-bottom: #d84e4d solid .04rem !important;
}
.dynamic-box{
    border-bottom: #eeeeee solid .04rem;
}
.dynamic-name{
    padding-top: .6rem;
    height: 2rem;
}
.dynamic-name-tx{
    width: 2rem;
}
.name-box{
    padding-left: .6rem;
    height: 1rem;
    width:  calc(100% - 2.6rem);
}
.name-box-top,.name-box-xia{
    height: 1rem;
    display: block;
    line-height: 1rem;
}
.name-sex{
    width: .56rem;
    padding: 0 .2rem;
    margin-top: .2rem;
}
.name-xia{
    height: 1rem;
    display: block;
}
.name-xia img{
    width: .8rem;
}
.dynamic-title{
    min-height: 1rem;
    line-height: 1rem;
    display: block;
    padding: .4rem 0;
}
.img-box img{
    width: 32%;
}
.like-comm{
    height: .6rem;
    padding: .6rem 0;
    line-height: .6rem;
}
.like-comm span{
    width: 2.2rem;
}
.like-comm img{
    width: .7rem;
    height: .6rem;
    padding-right: .2rem;
}
</style>
